{% macro navitem(item) %}
  {% set collection = item.navPath[item.navPath.length - 1] %}
  {% set isPrimaryActive = collection | includesUrl(page.url) %}

  <div class="sidebar-nav-item-heading {{ 'active' if isPrimaryActive }}">
    <esl-trigger class="sidebar-nav-item-trigger sidebar-nav-item-arrow "
                 target="::parent::next"
                 {% if isPrimaryActive %}active{% endif %}>
      {{ item.data.navTitle or item.data.title }}
    </esl-trigger>
  </div>

  <esl-panel id="sidebar-{{ collection }}-menu"
             class="sidebar-nav-secondary nav-secondary-panel {{ 'open' if isPrimaryActive }}"
             {% if isPrimaryActive %}data-open{% endif %}
             group="{{ 'esl-nav' if item.parent === 'content' }} {{ collection if item.parent != 'content' }}">
    <ul class="sidebar-nav-secondary-list">
      {% for itm in item.children | sortByNameAndOrder %}
        {% set isActive = page.url === itm.url %}
        {% set isDraft = [].concat(itm.data.tags).includes('draft') %}
        {% if itm.children.length %}
          <li class="sidebar-nav-secondary-item sidebar-secondary-nav-item-children">{{ navitem (itm) }}</li>
        {% else %}
        <li class="sidebar-nav-secondary-item {{ 'active' if isActive }} {{ 'draft' if isDraft }}"
            {% if isActive %}aria-selected="true"{% endif %}>
          <a class="sidebar-nav-secondary-link"
            {% if isActive %}aria-current="page"{% endif %}
            href="{{ itm.url | url }}">
            {{ itm.data.navTitle or itm.data.title }}
          </a>
        </li>
        {% endif %}
      {% endfor %}
    </ul>
  </esl-panel>
{% endmacro %}
